<!--
 * @Descripttion: 出手鸭小程序
 * @version:1.0.1 
 * @Author: HHL
 * @Date: 2023-10-17 18:17:03
 * @LastEditTime: 2023-11-21 21:02:21
 * @LastEditors: sueRimn
-->


<template>
  <view>
    <!-- #ifdef H5 -->
    <custom-navbar title="加价券" />
    <!-- #endif -->
    <view class="nav-list d-flex">
      <view
        class="item"
        v-for="item in navList"
        :key="item.value"
        :class="item.value == active ? 'active' : ''"
        @click="onNavClick(item.value)"
      >
        {{item.label}}
      </view>
    </view>
    <view class="coupon">
      <load-list
        :loading="loading"
        :loadMore="loadMore"
        :haveMore="haveMore"
        :list="list"
        noDataText="暂无加价券"
      >
        <template #default>
          <coupon-item
            v-for="item in list"
            :key="item.bonusId"
            :active="active"
            :item="item"
          />
        </template>
      </load-list>
      
    </view>
  </view>
</template>

<script>

import {
  fetchUserBonusList,
} from '@/api'


import CouponItem from './components/CouponItem.vue'

export default {
  components: {
    CouponItem,
  },
  data() {
    return {
      navList: [
        { value: 1, label: '未使用' },
        { value: 2, label: '已使用' },
        { value: 3, label: '已过期' }
      ],
      active: 1,

      loading: false,
      loadMore: false, // 正在加载中更多数据
      haveMore: true, // 是否还有更多数据
      page: 1,
      size: 20,
      list: [],
    }
  },

  onLoad(option) {
    const { status } = option
    if (status) {
      this.active = status || ''
    }
    this.loadList()
  },

  onPullDownRefresh() {
    this.loadMore = true
    this.page = 1
    this.list = []
    this.loading = true
    this.$nextTick(() => {
      this.loadList()
    })
  },

  // 页面滚动到底部
  onReachBottom() {
    if (!this.loadMore && this.haveMore) {
      this.loadMore = true
      this.page = Number(this.page) + 1
      this.$nextTick(() => {
        this.loadList()
      })
    }
  },

  methods: {

    loadList() {
      try {
        //加载中
        
        fetchUserBonusList({
          type: this.active,
          page: this.page,
          size: this.size,
        }).then(({ data, code }) => {
          if (code === 200 && data && data.length) {
            this.haveMore = false
            const list = [ ...this.list, ...data]
            this.list = list
          }
        })
      } finally {
        this.loadMore = false
        this.loading = false
        uni.stopPullDownRefresh()
      }
    },
    

    // nav点击
    onNavClick(active) {
      this.page = 1
      this.list = []
      this.loading = true
      this.loadMore = true
      this.active = active
      this.$nextTick(() => {
        this.loadList()
      })
    },
  }
}
</script>


<style lang="scss" scoped>
.nav-list{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  max-width: 750rpx;
  height: 84rpx;
  background: #FFF;
  z-index: 1;
  .item{
    width: 33.33%;
    font-size: var(--hui-font-size-26);
    line-height: 80rpx;
    color: var(--hui-color-subtitle);
    text-align: center;
    &.active{
      position: relative;
      font-size: var(--hui-font-size-30);
      font-weight: bold;
      color: var(--hui-color-primary);
      &::after{
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0rpx;
        margin: 0 auto;
        content: "";
        width: 28rpx;
        height: 8rpx;
        background: var(--hui-color-primary);
        border-radius: 4rpx;
      }
    }
  }
}

.coupon{
  padding: 100rpx 32rpx 0;
  background-color: #f6f7f9;
}
</style>